<style>
  /*.pb-standalone img {width: 23%;margin: 1%;float: left;}*/
  .list-block .item-title.label {width: 30%;}
  .amount {
    padding: 0;
    width: inherit;
    flex-grow: 1;
    text-align: center;
    background: #fff;
    border: none;
    border-radius: 0;
  }
  .plus,.minus {
    width: 1.35rem;
    height: 1.35rem;
    line-height: 1.2rem;
    text-align: center;
    background: #e7e7e7;
    /*border-radius: 2px;*/
    font-size:1rem;
  }
</style>

<div class="page">
  <header class="bar bar-nav">
    <h1 class="title">商品详情</h1>
    <a class="icon icon-cart" style="float: right;"></a>
  </header>

  <div class="content" style="bottom: 2.2rem;">
      <!--<p style="margin:.5em 0;">A2 Platinum Infant Formula Stage 1</p>-->
      <!--<p style="margin:.5em 0;">白金系列1段婴儿配方奶粉</p>-->
    <div class="swiper-container" data-autoplay="2000" data-pagination='.swiper-pagination' data-pagination-type="bullets" style="padding-bottom: 0px">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="/images/kang1.png" style="width: 100%; height: 200px"></div>
        <div class="swiper-slide"><img src="/images/kang2.png" style="width: 100%; height: 200px"></div>
        <div class="swiper-slide"><img src="/images/kang3.png" style="width: 100%; height: 200px"></div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
      <div class="list-block" style="font-size: .75rem; margin: .75rem 0;">
        <ul>
          <!-- Text inputs -->
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">英文名</div>
                <div class="item-input">
                  <div><%= data[0].pinyin %></div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">中文名</div>
                <div class="item-input">
                  <div><%= data[0].name %></div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">规格</div>
                <div class="item-input">
                  <div><%= data[0].model %></div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">毛重</div>
                <div class="item-input">
                  <div><%= data[0].weight %></div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">零售价</div>
                <div class="item-input">
                  <div>¥666 / $111</div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="item-content">
              <div class="item-inner">
                <div class="item-title label">产品简介</div>
                <div class="item-input">
                  <div><p><%= data[0].remark %>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介
                      简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</p></div>
                </div>
              </div>
            </div>
          </li>

        </ul>
      </div>
  </div>
  <div class="bar bar-footer-secondary row" style="bottom: 0;">
    <div class="item-inner col-40" style="display: flex;justify-content: space-between;position: relative;top: .35rem;">
      <i class="minus" style="color: #bbb;line-height: .5rem;">_</i>
      <input class="amount" type="number" pattern="[0-9]*" value="1"/>
      <i class="plus">+</i>
    </div>
    <a class="button button-fill button-success col-60" href="#" id="add-to-cart">加入购物车</a>
  </div>
</div>
<div class="popup popup-info">
  <div class="content-block">
    <p>产品信息here</p>
    <p><%= data[0].remark %></p>
    <p><a href="#" class="close-popup">关闭简介</a></p>
  </div>
</div>
<script>
  $(function(){
      var url = window.location.href;
//      $.get(url,function(res){
//        console.log(res);
//      });

    /*=== 默认为 standalone ===*/
    var myPhotoBrowserStandalone = $.photoBrowser({
      photos : [
        '//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg',
        '//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg',
        '//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg',
      ]
    });
    //点击时打开图片浏览器
    $(document).on('click','.pb-standalone',function () {
      myPhotoBrowserStandalone.open();
    });

    //输入数量
    $('.amount').change(function(){
        $(this).val(function(){
            return $(this).val() == 0 ? 1 : Number($(this).val());
        });
        $(this).val() == 1 ? $('.minus').css('color','#ccc') : $('.minus').css('color','#5f646e');

    });

    //    加减数字
    function count($this,isPlus){
      var $thisVal = $this.siblings('input');
      var amount = Number($thisVal.val());
      if(!isPlus && amount == 1) return;
      if(Number.isInteger(amount) && amount >= 1){
        $thisVal.val(function(){
          return isPlus ? Number($thisVal.val()) + 1 : Number($thisVal.val()) - 1;
        });
        $thisVal.val() == 1 ? $('.minus').css('color','#ccc') : $('.minus').css('color','#5f646e');

      }else{
        $.toast("商品数量错误");
        $thisVal.val("1");
      }
    }
    $(document).on('click','.plus',function(){
      count($(this),true);
    });
    $(document).on('click','.minus',function(){
      count($(this));
    });

    //    加入购物车
    $(document).on('click','#add-to-cart',function(){
      $.showIndicator();
      var amount = Number($('.amount').val());
      var pid = '<%= data[0].sn %>';
      console.log(pid);

      if(Number.isInteger(amount) && amount >= 1){
        $.post('/user/addToCart',{productId: pid, amount: amount},function(res, status){
          console.log(status);
          console.log(res);
          if (res.status == 'success'){
            $.hideIndicator();
            $.toast("加入购物车成功");
          }
        });
      }else{
        $.toast("商品数量错误");
        $('.amount').val("1");
      }
    });


    $('.bar-nav .icon-cart').click(function(){
        window.location.href = "/cart";
    });
  })
</script>

